<template>
  <div class="port-box rule-box" id="carduse">

    <div class="equipID">
      <span class="iconfont icon-chongdianqia"></span>卡编号: {{cardid}}充值记录
    </div>
    <div class="rules-list List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list class="chongzhibox">
          <mu-list-item v-for="(item,index) in cardList" :key="index">
            <mu-list-item-content>
              <div class="fleft">
                <div class="iconfont-box fleft" style="background: rgba(49, 209, 158, 1);">
                  <span class="icon-kahao iconfont"></span>
                </div>
                <div class="data fleft">
                  <p class="data-title">
                    手机号: {{item.mobile}}

                  </p>


                  <p class="data-time">{{item.time}}</p>
                </div>
                <div class="_clear"></div>
              </div>
              <div class="fright">
                <p style="color:#1EC5F1"> ¥{{item.amount}}</p>
                <p><span class="data-time">{{item.type|type}}</span></p>

              </div>
              <div class="_clear"></div>
            </mu-list-item-content>
          </mu-list-item>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无充值记录</p>
          </div>
        </mu-list>
        <!-- <mu-list>
          <mu-list-item v-for="(item,index) in cardList" :key="index">
            <mu-list-item-content>
              <mu-list-item-title>
                <div class="fleft">
                  <p class="title-name">
                    <span class="add-name">{{item.mobile}}</span>

                  </p>
                  <p class="xadd">{{item.status}}</p>
                </div>

                 <div class="fright">
                     <p class="money">
                    <span style="color:#1EC3F1">¥{{item.amount}}</span>
                     </p>
                    <p class="xadd">{{item.time}}</p>
                  </div>
              </mu-list-item-title>

            </mu-list-item-content>
          </mu-list-item>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无充值记录</p>
          </div>
        </mu-list> -->
      </mu-load-more>
    </div>
  </div>
</template>

<script>
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";

    export default {
        data() {
            return {
                cardid: this.$route.params.id,
                num: 5,
                loaded_all: false,
                refreshing: false,
                loading: false,
                text: "List",
                nolist: true,
                cardList: [],
            }
        },
        mounted() {
            this.getList({pageNo: 1, pageSize: 5, cardNo: this.cardid});
        },
        methods: {
            getList(param) {
                this.$api.getRechargeRecods(param).then(res => {
                    console.log(res);
                    if (res.data.data != null) {
                        this.nolist = false;
                        this.cardList = res.data.data.records;
                        if (res.data.data.pages == 1) {
                            Toast("已加载全部数据");
                            this.loaded_all = true;
                        }
                    }
                });
            },
            refresh() {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.getList({pageNo: 1, pageSize: 5, cardNo: this.cardid});
                }, 2000);
            },
            load() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.num += 3;


                    this.getList({pageNo: 1, pageSize: this.num, cardNo: this.cardid});

                }, 2000);
            }
        },
        watch: {
            cardList: function (v) {
                if (v == "") {
                    this.nolist = true;
                } else {
                    this.nolist = false;
                }
            }
        },
        filters: {
            type: function (v) {
                switch (v) {
                    case 0:
                        return "充值";
                        break;
                    case 1:
                        return "消费";
                        break;
                    case 2:
                        return "赠送";
                        break;
                    case 3:
                        return "系统充值";
                        break;
                    case 4:
                        return "退款";
                        break;
                    case 5:
                        return "退款失败";
                        break;
                    case 6:
                        return "转款";
                        break;
                    default:
                        return "";
                        break;
                }
            }
        }
    }
</script>

<style>

</style>
